import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import CoreTech from './CoreTech';
import CompetingModel from '../../../containers/CompetingModelContainer';
import PriceConfigBill from '../../../containers/PriceConfigBillContainer';
import TestDriveBill from '../../../containers/TestDriveBillContainer';

class AddItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  _goCoreTech() {
    this.props.navigator.push({
      component: CoreTech,
    });
    this.props.onPress();
  }

  _goPriceConfigBill() {
    const { dispatch } = this.props;
    this.props.onPress();
    this.props.navigator.push({
      component: PriceConfigBill,
      passProps: { dispatch },
    });
  }

  _goCompetingMoel() {
    const { dispatch } = this.props;
    this.props.onPress();
    this.props.navigator.push({
      component: CompetingModel,
      passProps: { dispatch },
    });
  }

  _goTestDriveBill() {
    const { dispatch } = this.props;
    this.props.onPress();
    this.props.navigator.push({
      component: TestDriveBill,
      passProps: { dispatch },
    });
  }

  render() {
    return (
      <View style={[styles.bgColor, styles.flex]}>
        <View style={styles.wrapper}>
          <View style={[styles.arrow]} />
          <View style={[styles.content]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.row, styles.list]}
              onPress={() => this._goCompetingMoel()}
            >
              <Image source={require('../../../img/compose.png')} />
              <Text style={[styles.text]}>竞品车型</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.row, styles.list]}
              onPress={() => this._goCoreTech()}
            >
              <Image source={require('../../../img/science.png')} />
              <Text style={[styles.text]}>核心科技</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.row, styles.list]}
              onPress={() => this._goPriceConfigBill()}
            >
              <Image source={require('../../../img/submit.png')} />
              <Text style={[styles.text]}>价格配置单</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.row, styles.list]}
              onPress={() => this._goTestDriveBill()}
            >
              <Image source={require('../../../img/submit.png')} />
              <Text style={[styles.text]}>预约试驾单</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  wrapper: {
    justifyContent: 'flex-start',
    alignItems: 'flex-end',
    width: '100%',
    height: '100%',
    paddingTop: PxToDp(26),
    backgroundColor: 'transparent',
  },
  content: {
    width: PxToDp(138),
    height: PxToDp(180),
    marginTop: PxToDp(40),
    marginRight: PxToDp(16),
    backgroundColor: '#fff',
    shadowColor: '#333',
    shadowOffset: {
      width: PxToDp(0),
      height: PxToDp(0),
    },
    shadowOpacity: 0.6,
    shadowRadius: PxToDp(4),
    borderRadius: PxToDp(2),
  },
  list: {
    alignItems: 'center',
    width: '100%',
    height: PxToDp(45),
    paddingLeft: PxToDp(16),
    borderColor: '#eeeff3',
    borderBottomWidth: PxToDp(1),
  },
  text: {
    marginLeft: PxToDp(8),
    color: '#666',
    fontSize: PxToDp(16),
  },
  arrow: {
    position: 'absolute',
    top: PxToDp(54),
    right: PxToDp(28),
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderWidth: 6,
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#fff',
    zIndex: 10,
  },
});

export default AddItem;
